<!-- 視頻通話，呼叫面板 -->
<template>
  <view class="cellModal disFlxCC">
    <view class="headImg">
      <image
        :src="cellInfo.headimg"
        style="width: 100%; height: 100%"
        mode="aspectFill"
      />
    </view>

    <view class="pt-26" v-if="meetingStatus === 2"
      >{{ cellInfo.userName }}，邀请你视频通话...</view
    >
    <view class="pt-26" v-else>邀请{{ cellInfo.userName }}视频通话...</view>
    <view style="margin-top: 30vh">{{
      meetingStatus === 1 ? "等待对方接听..." : ""
    }}</view>
    <view class="pt-35 disFlxJS">
      <view class="mx-50 cellBox cellBox1 disFlxCC" @click="hangUp">
        <image
          src="@/static/image/image220701(21).png"
          style="width: 34px; height: 34px"
        />
        <view>挂断</view>
      </view> 
      <view
        v-if="meetingStatus === 2"
        class="mx-50 cellBox cellBox2 disFlxCC"
        @click="answer"
      >
        <image
          src="@/static/image/image220701(25).png"
          style="width: 34px; height: 34px"
        />
        <view>接听</view>
      </view>
    </view>

  </view>
</template>

<script>

export default {
  computed: {
    // 用户信息
    userInfo() {
      return this.$store.state.userInfo;
    },
    // 小鱼会议信息
    cellInfo() {
      return this.$store.state.cellInfo;
    },
    // 当前通话IM对象
    currentMessage() {
      return this.$store.state.currentMessage;
    },
  },
  data() {
    return {
      meetingStatus: 1, // 1是呼叫别人, 2是被呼叫
      isClick: false,
      innerAudioContext: ""
    };
  },
  onLoad(options) {
    this.innerAudioContext = uni.createInnerAudioContext();
    this.$store.dispatch("getUserInfo").then(()=>{
        this.$store.dispatch("loginXy") // 登录小鱼
    })

    this.meetingStatus = Number(options.meetingStatus);
    if (this.meetingStatus === 1) {
        this._createGroup('evtImMsgCall');// 發送呼叫對方IM信息
    }else{
      uni.vibrateShort({
        success: function () {
          console.log('震动手机');
        }
      });
    }
    
    this.playBGM()
  },
  onUnload(){
    // console.log(this.isClick);
    // if(!this.isClick && this.currentMessage.data && this.currentMessage.data.imGroupId){ // 未点击操作,异常退出页面执行挂断事件
    //   this.hangUp()
    // }
  },
  methods: {
    // 挂断
    hangUp() {
        this.isClick = true
        if(this.meetingStatus === 1){
          this.$store.dispatch("sendMessage",{groupID: this.currentMessage.data.imGroupId,action: 'evtImMsgCallerHangUp',replyMsg: this.currentMessage}); // 发送主动挂断消息
          setTimeout(() => {
            this.$store.dispatch("dissolveGroup"); // 解散群组
          }, 2000);
        }else{
          this.$store.dispatch("sendMessage",{groupID: this.currentMessage.data.imGroupId,action: 'evtImMsgHangUp',replyMsg: this.currentMessage}); // 发送拒接消息
        }
        
        this.stopBGM()
        this.goBack()
    },
    // 接听
    answer() {
        this.isClick = true
        this.$store.dispatch("sendMessage",{groupID: this.currentMessage.data.imGroupId,action: 'evtImMsgAnswer',replyMsg: this.currentMessage}); // 发送接听消息
        this.stopBGM()
        uni.redirectTo({ url: `/pagesB/meeting/index` });
    },
    // 发送IM消息方法
    // "evtImMsgCall"        // 呼叫邀请
    // "evtImMsgAnswer"    // 接听电话
    // "evtImMsgCallerHangUp" // 呼叫者挂断（对方在接听界面）
    // "evtImMsgHangUp"   //  挂断   拒绝接听
    // "evtImMsgHostAllEndOfCall" //通话结束 （主持人挂断房间所有人）,判断自己是否主持人
    // "evtImMsgMemberAllEndOfCall" //两人通话,一方挂断,直接退出会议,  
    // "evtImMsgHostEndOfCall" //退出会议 （主持人自己退出，不结束会议）,用户端不处理此状态
    // "evtImMsgHostMemberEndOfCall" //退出会议 （多人会议（两个人以上在会议室），接听方只有自己退出会议）,判断自己是否是主持人,
    // "evtImMsgbusy" //  占线（接听方正在通话中）
    // 创建群组
    _createGroup(action) {
        const that = this;
        const groupID = `M-${that.userInfo.mobile}-${that.cellInfo.meetingRoomNumber}`;
        uni.$TUIKit.createGroup({
            name: groupID,
            type: uni.$TUIKitTypes.GRP_WORK,
            groupID,
            memberList: [
                {
                    userID: that.cellInfo.id + '', // string, that.cellInfo.id
                },
            ]
        }).then(() => {
            this.$store.dispatch("sendMessage",{groupID,action}); // 发送呼叫消息
        })
    },
    // 播放bgm
    playBGM() {
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.loop = true
      this.innerAudioContext.src = 'https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/before.m4a';
      this.innerAudioContext.onPlay(() => {
        console.log('开始播放');
      });
      this.innerAudioContext.onError((res) => {
        console.log(res.errMs,'播放失败');
      });
    },
    // 停止播放
    stopBGM() {
      this.innerAudioContext.stop() // 停止播放
      this.innerAudioContext.destroy()
    }
  },
  
  onUnload(){
    this.stopBGM()
  }
};
</script>
<style lang='scss' scoped>
.cellModal {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: linear-gradient(153deg, #2dbcbe 0%, #28c6ab 100%);
  color: #ffffff;
  font-size: 14px;
  .headImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
  }
  .cellBox {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .cellBox1 {
    background: #ff5454;
  }
  .cellBox2 {
    background: #5a86ff;
  }
}
</style>